<script setup>
import { onMounted, ref } from 'vue';
import { getRequest } from './services/api.js'
const rolelists = ref([])
const message=ref('')
const searchInput=ref('')

onMounted(() => {
  getAllRoles()
});
const getAllRoles=()=>{
  message.value = '';
  getRequest('/role/getAllRoles').then(res => {
    if (!res) {
      message.value = '请求无响应，请重试';
      rolelists.value = [];
      return;
    }
    if (res.code !== '200') {
      message.value = res.message || '获取角色失败，请重试';
      rolelists.value = []
    } else {
      rolelists.value = res.data
      message.value = ''
      console.log(rolelists.value);
    }
  })
    .catch(error => {
      message.value = error.error || '网络异常，无法获取数据';
      rolelists.value = [];
    });
}

const handleSearch = () => {
  const keyword = searchInput.value.trim();
  getRequest('/role/getRoleByName', { roleName: keyword }).then(res => {
    if (res.code !== '200') {
      message.value = res.message
      rolelists.value = []
    } else {
      rolelists.value = Array.isArray(res.data) ? res.data : [res.data];
      message.value = ''
      console.log(rolelists.value);
    }
})
}
</script>

<template>
  <router-view></router-view>
  <div class="page">
    <div class="page-header" v-if="$route.path === '/'">
      <img src="/public/imgs/logo.png">
      <h3>豆沙聊天</h3>
    </div>
    
    <div class="body" v-if="$route.path === '/'">
      <div class="body-search">
        <div class="body-input">
          <div class="search-img"><img src="/public/imgs/搜索.png"></div>
          <div class="search-input">
            <input type="text" placeholder="搜索" v-model="searchInput" @keyup.enter="handleSearch">
          </div>
          <div class="dosearch" @click="handleSearch">
            <span>搜索</span>
          </div>
        </div>
      </div>
      <div class="body-content">
        <div class="search-content">
          <div class="search-category" @click="getAllRoles">
            全部
          </div>
          <div class="search-role">
            <div class="error-message" v-if="message">
                {{ message }}
            </div>
            <div class="role-card" v-for="(role, index) in rolelists" :key="index">
              <div class="role-avatar">
                <img :src="role.roleAvatar">
              </div>
              <h4 class="role-name">{{ role.roleName }}</h4>
              <p class="role-message">{{ role.roleDesc }}</p>
              <a class="chat-btn" :href="`/chat?roleName=${role.roleName}`"  style="text-decoration: none;" >开始聊天</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.page {
  height: 100vh;
}

.page-header {
  width: 100vw;
  height: 4vh;
  display: flex;
  align-items: center;
  background-color: rgb(65, 68, 72);
  color: white;
  font-weight: bold;
  padding-left: 4vw;
}

.page-header img {
  width: 3vw;
  height: 4vh;
  object-fit: contain;
}

.body-search {
  width: 100vw;
  height: 18vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.body-input {
  width: 36vw;
  height: 5vh;
  border: 1.5px solid rgb(74, 222, 207);
  border-radius: 30px;
  display:flex;
  align-items: center;
  overflow: hidden;
}

.search-img{
  width: 1.8vw;
  height: 3vh;
  margin-left: 0.8vw;
}

.search-img img{
  width: 100%;
  height: 100%;
}

.search-input{
  width: 28vw;
  height: 3vh;
  margin-left: 0.5vw;
}

.search-input input{
  width: 100%;
  height: 100%;
  font-size: 16px;
  border: none; 
  outline: none; 
  background: transparent;
}
.dosearch{
  flex: 1;
  background-color: rgb(74, 222, 207);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  cursor: pointer;
}
.body-content{
  width: 100%;
  height: 65vh;
  display: flex;
  justify-content: center;
}
.search-content{
  width: 88%;
  height: 62vh;
}
.search-category{
  width: 6vw;
  height: 4vh;
  border-radius: 5px;
  background-color: rgb(77, 200, 249);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.search-role{
  width: 100%;
  height: 47vh;
  margin-top: 1vh;
  display: flex;
}
.role-card{
  width: 17vw;
  height: 21vh;
}

.role-avatar{
  width: 9vw;
  height: 12vh;
}
.role-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.role-name {
  font-size: 18px;
  margin-top: 0.5vh;
  color: #333;
}

.role-message {
  font-size: 15px;
  color: #666;
  margin-top: 0.8vh;
  width: 13vw;
}

.chat-btn {
  background-color: rgb(74, 222, 207);
  color: white;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  width: 10vw;
  height: 3vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1vh;
}

.error-message {
  color: #ff4d4f; 
  font-size: 16px;
  margin: auto; 
  padding: 2vh;
}
</style>
<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}
</style>
